<template>
<div class="homeRecommend">
  <div class="title">
   热销推荐
  </div>
  <ul>
    <router-link
      tag="li" 
      class="item border-bottom" 
      v-for="item of recommendList" 
      :key="item.id"
      :to="'/detail/'+item.id"
    >
      <img  class="item-img" :src="item.imgUrl" alt="">
      <div class="item-info">
          <div class="item-title">{{item.title}}</div>
          <div class="item-desc">{{item.desc}}</div>
          <button class="item-btn">查看详情</button>
      </div>
    </router-link>
  </ul>
</div>
 
</template>
<script>
 export default {
   name:"homeRecommend",
   props:{
     recommendList:Array
   },
   data () {
     return {
     }
   },
   components: {
   }
 }
</script>
<style lang="stylus" scoped>
@import "~styles/mixins.styl";
    .title
        line-height .8rem
        text-indent .2rem
        margin-top .2rem
        background #eee
    .item
      height 1.9rem
      display flex
      overflow hidden
      .item-img
        width 1.7rem
        height 1.7rem
        padding .1rem
      .item-info
        flex 1
        padding .1rem
        min-width 0
        .item-title
          line-height .54rem
          font-size .32rem
        .item-desc
          line-height .4rem
          color #ccc
          ellipsis()  
        .item-btn
          color #fff
          background #ff9300
          line-height .44rem
          padding 0 .2rem
          border-radius .06rem
          margin-top .16rem       
</style>

